
.mainDiv{
	width: 500px;
	height: 300px;
	background-color: rgb(255,255,255);
	border: 1px;
	border-color: black;
	border-style: solid;
	margin: auto;
}

.midDiv{
	width: 310px;
	height: 210px;
	margin: auto;
	/*相对位置*/
	position:relative;
	top: 55px;
}

.div1{
	width: 100px;
	height: 100px;
	background-color: orange;
	background-size: 100% 100%;
	float: left;
	border-radius: 50%;
	/*过渡时长*/
	transition: 1s;
}

.div2{
	width: 100px;
	height: 100px;
	background-color: red;
	background-size: 100% 100%;
	float: left;
	margin-left: 5px;
	border-radius: 50%;
	transition: 1s;
}

.div3{
	width: 100px;
	height: 100px;
	background-color: blue;
	background-size: 100% 100%;
	float: left;
	margin-left: 5px;
	border-radius: 50%;
	transition: 1s;
}

.div4{
	width: 100px;
	height: 100px;
	background-color: pink;
	background-size: 100% 100%;
	float: left;
	margin-top: 10px;
	margin-left: 40px;
	border-radius: 50%;
	transition: 1s;
}

.div5{
	width: 100px;
	height: 100px;
	background-color: yellow;
	background-size: 100% 100%;
	float: left;
	margin-top: 10px;
	margin-left: 30px;
	border-radius: 50%;
	transition: 1s;
}

/*鼠标焦点放置过渡效果*/
.div1:hover{
	background-image: url(http://qq.yh31.com/tp/zjbq/201607091400136188.gif);
}

.div2:hover{
	background-image: url(http://qq.yh31.com/tp/qw/201607111423385682.gif);
}

.div3:hover{
	background-image: url(http://qq.yh31.com/tp/qw/201607111424243221.gif);
}

.div4:hover{
	background-image: url(http://qq.yh31.com/tp/qw/201504092009367136.gif);
}

.div5:hover{
	background-image: url(http://qq.yh31.com/tp/zjbq/201207151541340191.gif);
}


